<template>
  <div class="login-container">
    <el-card class="login-card" shadow="hover">
      <h2 class="login-title">管理员登录</h2>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="captchaInput">
          <el-row>
            <el-col :span="12">
              <el-input v-model="form.captchaInput" placeholder="输入验证码"></el-input>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <img :src="captchaBase64" style="width: 100px; height: 30px;" @click="refreshCaptcha"
                   class="captcha-image" />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import adminApi from "@/api/AdminApi.js";
import {tokenStore} from "@/stores/token.js";
import router from "@/router/index.js";

const form = ref({
  key:'',
  username: '',
  password: '',
  captchaInput: '',
});

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  captchaInput: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};
// 验证码base64
const captchaBase64 = ref('')
const formRef = ref(null);

const token = tokenStore();

const handleSubmit = () => {

  formRef.value.validate((valid) => {
    if (valid) {
      adminApi.login(form.value.username, form.value.password, form.value.key, form.value.captchaInput)
          .then(resp => {
            if (resp.code === 10000) {
              // sessionStorage.setItem('token', resp.data);
              token.updateToken(resp.data)
              ElMessage.success(resp.msg);
              router.push("/admin/index");
            } else {
              ElMessage.error(resp.msg);
            }
      })
    } else {
      ElMessage.error('请检查表单填写');
      return false;
    }
  });
};

// 获取验证码
const captcha = () => {
  adminApi.captcha()
      .then(resp => {
        captchaBase64.value ='data:image/png;base64,' + resp.data.imageBase64Data;
        form.value.key = resp.data.key;
      });
};
// 刷新验证码
const refreshCaptcha = () => {
  captcha();
};

captcha()
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}

.captcha-button {
  margin-left: 10px;
}
</style>
